<template>
  <div class="home">
    <van-pull-refresh
      v-model="isLoading"
      success-text="刷新成功"
      @refresh="onRefresh"
    >
      <!-- 轮播图 -->
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img class="chart" v-lazy="image" />
        </van-swipe-item>
      </van-swipe>

      <!-- 未登录 -->
      <div class="login" v-if="show">
        <div class="text">欢迎来到喜茶GO</div>
        <div class="txt add">更好的会员服务，注册登录即可体验</div>
        <div class="btn" @click="btn">立即登录</div>
      </div>

      <!-- 已登录 -->
      <!-- 用户信息 -->
      <div class="user" v-else>
        <van-image round width="46px" height="46px" :src="imgData" />

        <!-- 用户名 -->
        <div class="news">
          <div class="name">
            {{ username }}
            <div class="vip">VIP1</div>
          </div>
          <div class="coupon" @click="showPopup">
            快来看看~~有没有优惠券未使用
            <van-icon name="arrow" />
          </div>
        </div>

        <!-- 二维码 -->
        <div class="code" @click="goCode">
          <img src="../assets/home/code.svg" alt="" />
          <div class="txt">会员码</div>
        </div>
      </div>

      <!-- 点餐 -->
      <div class="order">
        <div class="bigbox">
          <!-- 门店自取\外卖 -->
          <div
            class="orderbox"
            v-for="(v, i) in orderdata"
            :key="i"
            @click="changeorder"
          >
            <div class="img">
              <img :src="v.img" alt="" />
            </div>
            <div class="title">{{ v.title }}</div>
            <div class="txt">{{ v.txt }}</div>
          </div>
        </div>

        <!-- 一起喝 -->
        <div class="ordertog" @click="showShareplate">
          <img src="../assets/home/Milkteasnacks.svg" alt="" />
          <div class="togtitle">一起喝</div>
          <div class="txt">好友一起点，分享更方便</div>
        </div>
      </div>

      <!-- 活动 -->
      <div class="activity">
        <div class="activitybox" v-for="(v, i) in activitydata" :key="i">
          <div class="text add">{{ v.title }}</div>
          <div class="txt add">{{ v.txt }}</div>
          <img :src="v.img" alt="" />
        </div>
      </div>

      <!-- 优惠券列表 -->
      <van-popup
        v-model="showList"
        round
        position="bottom"
        style="height: 60%; padding-top: 4px"
      >
        <van-coupon-list
          :coupons="coupons"
          :chosen-coupon="chosenCoupon"
          :disabled-coupons="disabledCoupons"
          @change="onChange"
          @exchange="onExchange"
        />
      </van-popup>

      <!-- 分享面板 -->
      <van-share-sheet
        v-model="showShare"
        title="立即分享给好友"
        :options="options"
      />
    </van-pull-refresh>
  </div>
</template>

<script>
const coupon = {
  available: 1,
  condition: "无使用门槛\n最多优惠12元",
  reason: "",
  value: 150,
  name: "优惠券名称",
  startAt: 1489104000,
  endAt: 1514592000,
  valueDesc: "1.5",
  unitDesc: "元",
};

export default {
  name: "Home",

  data() {
    return {
      // 轮播图数据
      images: [
        require("../assets/home/theatre1.png"),
        require("../assets/home/theatre2.png"),
        require("../assets/home/theatre3.png"),
        require("../assets/home/theatre4.png"),
        require("../assets/home/theatre5.png"),
        require("../assets/home/theatre6.png"),
      ],

      orderdata: [
        {
          img: require("../assets/home/HallFood.svg"),
          title: "门店自取",
          txt: "下单免排队",
        },
        {
          img: require("../assets/home/take-outfood.svg"),
          title: "外卖",
          txt: "无接触配送，送喜到家",
        },
      ],

      activitydata: [
        {
          title: "喜茶百货",
          txt: "新口味上市",
          img: require("../assets/home/SparklingWater.png"),
        },
        {
          title: "阿喜团餐",
          txt: "企业欢聚享福利",
          img: require("../assets/home/Groupmeal.png"),
        },
        {
          title: "阿喜有礼",
          txt: "冬日好礼即刻送",
          img: require("../assets/home/Polite.png"),
        },
      ],

      //切换登录状态
      show: true,

      //优惠券
      showList: false,
      chosenCoupon: -1,
      coupons: [coupon],
      disabledCoupons: [coupon],

      //下拉刷新
      isLoading: false,

      //分享面板
      showShare: false,
      options: [
        [
          { name: "微信", icon: "wechat" },
          { name: "朋友圈", icon: "wechat-moments" },
          { name: "微博", icon: "weibo" },
          { name: "QQ", icon: "qq" },
        ],
        [
          { name: "复制链接", icon: "link" },
          { name: "分享海报", icon: "poster" },
          { name: "二维码", icon: "qrcode" },
          { name: "小程序码", icon: "weapp-qrcode" },
        ],
      ],

      imgData: "",
      username: "",
    };
  },

  created() {
    //获取搜索历史记录
    let Loggedin = sessionStorage.getItem("token");
    // 
    if (Loggedin) {
      this.show = false;
    }

    this.getHeadPortrait();
  },

  methods: {
    btn() {
      this.$router.push({ name: "Login" });
    },

    changeorder() {
      this.$router.push({ name: "Order" });
    },

    //跳转到会员码页面
    goCode() {
      this.$router.push({ name: "Code" });
    },

    // 优惠券
    onChange(index) {
      this.showList = false;
      this.chosenCoupon = index;
    },
    onExchange(code) {
      this.coupons.push(coupon);
    },
    showPopup() {
      this.showList = true;
    },

    // 打开分享面版
    showShareplate() {
      this.showShare = true;
    },

    //下拉刷新
    onRefresh() {
      setTimeout(() => {
        this.$toast("刷新成功");
        this.isLoading = false;
      }, 1000);
    },

    //获取我的头像
    getHeadPortrait() {
      this.axios({
        method: "get",
        url: "/findMy",
      })
        .then((res) => {
          // 
          // 查询成功
          if (res.data.code === "A001") {
            this.username = res.data.result[0].nickName;
            this.imgData = res.data.result[0].userImg;
          }
        })
        .catch((err) => {
          
        });
    },
  },
};
</script>

<style lang="less" scoped>
// 轮播图
.chart {
  width: 100%;
  height: 248px;
}

/deep/.van-swipe__indicators {
  bottom: 0.65rem;
}

/deep/.van-swipe__indicator {
  width: 0.22rem;
  height: 0.22rem;
  background-color: #818181;
}

/deep/.van-swipe__indicator--active {
  background-color: #37343b;
  opacity: 1;
}

// 登录
.login {
  width: 300px;
  margin: auto;
  background-color: #fff;
  border-radius: 10px;
  padding: 14px 20px;
  position: relative;
  bottom: 16px;
}

.text {
  font-size: 16px;
  padding: 0 0 2px 0;
  &.add {
    font-size: 14px;
  }
}

.btn {
  width: 100px;
  height: 30px;
  line-height: 30px;
  border-radius: 20px;
  text-align: center;
  background-color: #37343b;
  color: #fff;
  float: right;
  position: relative;
  bottom: 36px;
  left: 10px;
}

// 用户信息
.user {
  width: 300px;
  height: 60px;
  margin: auto;
  border-radius: 10px;
  padding: 10px 16px;
  background-color: #fff;
  position: relative;
  bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.news {
  width: 200px;
  height: 40px;
  border-right: 1px solid #999;
  display: flex;
  flex-wrap: wrap;
}

.name {
  width: 100%;
  height: 24px;
  line-height: 24px;
  font-weight: 600;
  font-size: 16px;
  display: flex;
}

.vip {
  width: 60px;
  transform: scale(0.5);
  text-align: center;
  border-radius: 10px;
  background-color: #adcff6;
  font-weight: 600;
}

.code img {
  position: relative;
  left: 2px;
}

.coupon {
  width: 100%;
  height: 20px;
  line-height: 20px;
  font-size: 12px;
  color: #999;
  transform: scale(0.9);
}

// 点餐
.order {
  width: 300px;
  margin: -10px auto;
  margin-bottom: 6px;
  background-color: #fff;
  border-radius: 10px;
  padding: 10px 20px;
}

.bigbox {
  width: 100%;
  display: flex;
}

.orderbox {
  width: 140px;
  height: 120px;
  display: flex;
  flex-wrap: wrap;
  &:nth-child(2n) {
    margin-left: 20px;
  }
}

.img {
  width: 100%;
}

.img img {
  width: 50px;
  height: 50px;
  position: relative;
  left: 46px;
  top: 8px;
}

.title {
  width: 100%;
  color: #37343b;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
}

.txt {
  width: 100%;
  text-align: center;
  font-size: 10px;
  color: #8d8d8d;
  &.add {
    text-align: left;
  }
}

.ordertog {
  width: 100%;
  display: flex;
  margin-top: 10px;
  align-items: center;
  border-top: 1px solid #e9e9e9;
  padding: 10px 0 0 0;
}

.togtitle {
  width: 290px;
  color: #37343b;
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  margin-left: 8px;
}

// 活动
.activity {
  width: 340px;
  margin: auto;
  display: flex;
}

.activitybox {
  width: calc(100% / 3);
  border-radius: 10px;
  padding: 6px 10px;
  &:nth-child(1) {
    background-color: #cee2c0;
    margin-right: 10px;
  }
  &:nth-child(2) {
    background-color: #eee6d2;
  }
  &:nth-child(3) {
    background-color: #ebdace;
    margin-left: 10px;
  }
}

.activitybox img {
  width: 70px;
  height: 40px;
  position: relative;
  top: 8px;
  left: 10px;
  border-radius: 8px;
}

/deep/.van-coupon-list__list {
  height: 300px;
}

/deep/.van-tabs__line {
  background-color: #eeab64;
}

/deep/.van-button--plain.van-button--danger {
  color: #37343b;
  font-weight: 600;
  background-color: #fff;
}

/deep/.van-button--danger {
  background-color: #37343b;
  border-color: #37343b;
}
</style>